<template>
  <div class="app-container">
    <div class="container">
      <div class="left-container">
        <div class="status">
          {{ getStatusText() }}
        </div>
        <div class="start">
          <el-image
            :src="require('@/assets/images/start.png')"
            :preview-src-list="[require('@/assets/images/start.png')]"
            fit="contain"
          />
          <el-link @click="toStart" type="primary">开始检查</el-link>
        </div>
        <div class="start">
          <el-image
            :src="require('@/assets/images/end.png')"
            :preview-src-list="[require('@/assets/images/end.png')]"
            fit="contain"
          />
          <el-link @click="toEnd" type="primary">结束检查</el-link>
        </div>
        <div class="start">
          <el-image
            :src="require('@/assets/images/result2.png')"
            :preview-src-list="[require('@/assets/images/result2.png')]"
            fit="contain"
          />
          <el-link @click="openUploadDialog" type="primary">上传结果</el-link>
        </div>
        <div @click="back" class="status">返回列表</div>
      </div>
      <div class="right-container">
        <el-card class="card-box">
          <div class="title">
            <span style="display: inline-block; width: 50px">{{
              patientInfo.register.name
            }}</span
            >&nbsp;
            <span>
              <dict-tag
                :options="dict.type.sys_user_sex"
                :value="patientInfo.register.sex"
                style="display: inline-block; width: 30px" /></span
            >&nbsp;
            <span style="display: inline-block; width: 40px"
              >{{ patientInfo.register.age }}岁</span
            >&nbsp;
            <span style="display: inline-block; width: 200px"
              >门诊号：{{ patientInfo.register.outpatientId }}</span
            >&nbsp;
            <span style="display: inline-block; width: 200px"
              >挂号时间：{{ patientInfo.register.registTime }}</span
            >
          </div>
        </el-card>

        <div class="img-container">
          <!--          <el-image class="img-lg" :src="require('@/assets/images/check1.png')" :preview-src-list="[require('@/assets/images/check1.png')]" fit="contain"/>-->
          <div
            id="main"
            style="
              width: 800px;
              height: 400px;
              margin: 0 auto;
              margin-top: 40px;
              margin-left: 60px;
            "
          ></div>
        </div>
      </div>
    </div>

    <!--    上传照片的弹出框-->
    <el-dialog
      title="上传结果"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form ref="uploadForm" :model="patientInfo" label-width="80px">
        <el-form-item label="选择图片" prop="image">
          <image-upload v-model="patientInfo.img" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="result">上传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listResult,
  getResult,
  delResult,
  addResult,
  updateResult,
} from "@/api/result/result";
import * as echarts from "echarts";
export default {
  name: "Result",
  dicts: ["result_status", "sys_user_sex", "sys_yes_no"],
  data() {
    return {
      patientInfo: "",
      open: false,
      status: "",
    };
  },
  created() {
    this.patientInfo = this.$route.query.patientInfo;
    this.getStatusText();
  },
  mounted() {
    this.tj();
  },

  methods: {
    tj() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      // Generate data
      let category = [];
      let dottedBase = +new Date();
      let lineData = [];
      let barData = [];
      for (let i = 0; i < 20; i++) {
        let date = new Date((dottedBase += 3600 * 24 * 1000));
        category.push(
          [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-")
        );
        let b = Math.random() * 200;
        let d = Math.random() * 200;
        barData.push(b);
        lineData.push(d + b);
      }
      // option
      option = {
        backgroundColor: "#0f375f",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["line", "bar"],
          textStyle: {
            color: "#ccc",
          },
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            name: "line",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 15,
            data: lineData,
          },
          {
            name: "bar",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#14c8d4" },
                { offset: 1, color: "#43eec6" },
              ]),
            },
            data: barData,
          },
          {
            name: "line",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(20,200,212,0.5)" },
                { offset: 0.2, color: "rgba(20,200,212,0.2)" },
                { offset: 1, color: "rgba(20,200,212,0)" },
              ]),
            },
            z: -12,
            data: lineData,
          },
          {
            name: "dotted",
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              color: "#0f375f",
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: lineData,
          },
        ],
      };

      option && myChart.setOption(option);
    },

    toStart() {
      //修改检查状态为正在检查
      if (this.patientInfo.status === 1) {
        let params = {
          id: this.patientInfo.id,
          status: 2,
        };
        updateResult(params).then((response) => {
          this.$modal.msgSuccess("开始检查");
          this.patientInfo.status = 2;
          this.getStatusText();
        });
      } else if (this.patientInfo.status === 0) {
        this.$modal.msgError("已经完成检查，请上传检查结果");
      } else {
        this.$modal.msgError("正在检查，请耐心等待");
      }
    },
    toEnd() {
      //修改检查状态为检查完成
      if (this.patientInfo.status === 2) {
        let params = {
          id: this.patientInfo.id,
          status: 0,
        };
        updateResult(params).then((response) => {
          this.$modal.msgSuccess("检查结束");
          this.patientInfo.status = 0;
          this.getStatusText();
        });
      } else if (this.patientInfo.status === 0) {
        this.$modal.msgError("检查已经结束，请上传检查结果");
      } else {
        this.$modal.msgError("请打开开关,开始检查");
      }
    },
    result() {
      //上传结果图片
      let params = {
        id: this.patientInfo.id,
        img: this.patientInfo.img,
      };
      updateResult(params).then((response) => {
        this.$modal.msgSuccess("上传成功");
        this.patientInfo.img = params.img;
        this.open = false;
      });
    },
    openUploadDialog() {
      this.open = true;
    },
    cancle() {
      this.open = false;
    },
    back() {
      this.$router.push({ path: "/result/result" });
      window.location.reload(); //全局刷新
    },
    getStatusText() {
      if (this.patientInfo.status === 1) {
        return "准备检查";
      } else if (this.patientInfo.status === 2) {
        return "正在检查";
      } else if (this.patientInfo.status === 0) {
        return "检查完成";
      }
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  height: 600px;
  /*background-color: red;*/
  display: flex;
  margin-top: 10px;
}
.left-container {
  width: 180px;
  height: 100%;
  /*background-color: palevioletred;*/
}
.status {
  background-color: #2775b6;
  color: white;
  font-size: 25px;
  width: 150px;
  border-radius: 10px;
  text-align: center;
  line-height: 35px;
  height: 40px;
  margin-right: 40px;
  font-family: tutu;
  margin-top: 20px;
  cursor: pointer;
  margin-left: 20px;
}

.right-container {
  flex: 1;
  height: 100%;
  width: 500px;
  margin-top: 30px;
  /*background-color: #ccb1ea;*/
}
.right-container .title {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: start;
  justify-content: start;
  margin-left: 30px;
  /*background-color: #ccb1ea;*/
}
.right-container .img-container {
  width: 100%;
  height: 500px;
  /*margin-left: 10px;*/
  /*text-align: center;*/
  /*background-color: #ccb1ea;*/
}
.box-card {
  width: 850px;
  height: 500px;
}
.start {
  margin-top: 40px;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
